/**
 * vue插件：注册项目所有的全局指令
 */
// 导入出错显示的默认图片
import DefImg from '@/assets/images/200.png'
// 图片加载loading
import LoadImg from '@/assets/images/load.gif'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  install (app) {
    // console.log('根实例：', app)
    // 挂载全局属性
    // vue 2写法
    // Vue.prototype.yourname = fn
    // vue 3写法
    app.config.globalProperties.load = LoadImg
    // 注册
    app.directive('lazyimg', {
      // 指令是具有一组生命周期的钩子：
      // 在绑定元素的 attribute 或事件监听器被应用之前调用
      created () { },
      // 在绑定元素的父组件挂载之前调用
      beforeMount () { },
      // 绑定元素的父组件被挂载时调用
      /**
       *
       * @param {*} el 绑定指令的元素
       * @param {*} binding 指令绑定的值
       */
      mounted (el, binding) {
        // console.log(el, binding)
        // 需求：实现图片进入可视区域，才渲染
        /**
         * 1. 组件中的图片，不直接给src
         * 2. 把src值给指令绑定
         * 3. 根据当前绑定指令的img元素，是否进入可视区域=》进入可视区，就把src赋给img渲染
         */
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 延迟查看loading效果
              // 注意：实际开发不要加，网速慢就能看到
              setTimeout(() => {
                el.src = binding.value
              }, 600)
              // 处理无效图片地址=》给个默认图片
              el.onerror = () => {
                el.src = DefImg
              }
              stop()
            }
          },
          { threshold: 0 }
        )
      },
      // 在包含组件的 VNode 更新之前调用
      beforeUpdate () { },
      // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
      updated () { },
      // 在绑定元素的父组件卸载之前调用
      beforeUnmount () { },
      // 卸载绑定元素的父组件时调用
      unmounted () { }
    })
  }
}
